<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script type="module">
    import { marked } from './marked.esm.js';
    // 严格电话号码正则（中国+国际格式）
    const PHONE_REGEX =
      /(9510585\d|0571[-\s]?\d{7,8}|0\d{2,3}[-\s]?\d{7,8}|\+?86[-\s]?1[3-9]\d[-\s]?\d{4}[-\s]?\d{4}|1[3-9]\d[-\s]?\d{4}[-\s]?\d{4}|400[-\s]?\d{3}[-\s]?\d{4}|800[-\s]?\d{3}[-\s]?\d{4})/g;

    const urlDistinguish = (str) => {
      const reg =
        /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi;
      str = str.replace(reg, "<a href='$1' class='jump'>$1</a>");
      return str;
    };

    marked.use({
      renderer: {
        text(token) {
          console.log('🚀 ~ text ~ token:', token);
          const isToken = 'tokens' in token && token.tokens;
          const str = isToken
            ? this.parser.parseInline(token.tokens)
            : token.text;
          let result = str.replace(
            /##(\d+)\$\$/g,
            '<span class="chunk-source" data-index="$1"></span>'
          );
          return result;
        },
        image(img) {
          return `<div class="md-img-box" data="${
            img.href
          }"><img onLoad="scrollToBottom()" class="md-img" src="${
            img.href
          }" alt="${img.text}" title="${img.title ? img.title : ''}"></div>`;
        },
        link(link) {
          console.log('🚀 ~ link ~ link:', link);
          if (link.href.includes('mailto:')) {
            return `${link.text}`;
          }
          return `<a href="${link.href}" class="jump">${link.text}</a>`;
        }
      },
      extensions: [
        {
          name: 'math',
          level: 'inline',
          start(src) {
            return src.match(/\$/)?.index;
          },
          tokenizer(src) {
            const match = src.match(/^\$+([^\$\n]+?)\$+/);
            if (match) {
              return {
                type: 'math',
                raw: match[0],
                text: match[1].trim()
              };
            }
          },
          renderer(token) {
            try {
              return katex.renderToString(token.text, {
                throwOnError: false,
                displayMode: false
              });
            } catch (e) {
              console.error(e);
              return token.raw;
            }
          }
        }
      ],
      hooks: {
        postprocess: (html) => {
          return html;
        }
      }
    });
    const test = {
      input:
        '使用消毒柜的步骤如下：\n\n1. **开门使用**：轻轻拉开柜门到最大行程，注意不要用力过猛，以免损坏门体。使用前请去除碗架与抽屉架上的扎带，并检查内腔内壁、灯罩、门体上是否有保护膜，若有则必须去除清理干净。\n\n2. **放置食具**：将洗净沥水后的食具竖直放置在碗架上，根据食具规格大小放置在碗架的不同区域中，不要重叠堆放，以保证消毒效果。如果食具不能竖放，可以平放，但不宜堆叠，否则会影响消毒效果。![](https://roki-ai-rag.oss-cn-hangzhou.aliyuncs.com/rag/chunk/2025-01-15/1736933268641-c9b59949.png)\n\n3. **关门**：轻轻关上柜门，确保门体关闭到位。\n\n4. **启动消毒**：通过控制面板选择合适的消毒程序，启动消毒过程。消毒柜会通过臭氧和紫外线光子的能量，结合热力作用进行杀菌，达到消毒效果。\n\n5. **消毒完成**：消毒完成后，等待消毒柜冷却后，再打开柜门取出食具。\n\n如果需要更详细的使用指南或遇到其他问题，您可以查看“老板电器”小程序或ROKI智能烹饪APP中的电子说明书，或者直接联系我们的官方客服，电话是95105855（未开通地区为0571-86281080）。希望这些信息对您有所帮助！',
      expected: `<p>老板电器的人工客服服务时间为 <strong>8:30-21:30</strong>（春节假期除外）。如果您在这个时间段外有任何问题，可以随时联系我，我会尽力为您解答！ 😊  </p>
    <p>如需帮助，也可以拨打官方客服热线：  </p>
    <ul>
    <li><strong>全国统一客服电话</strong>：<a href="tel:95105855">95105855</a></li>
    <li><strong>未开通地区</strong>：<a href="tel:057186281080">0571-86281080</a></li>
    </ul>
    <p>祝您生活愉快！</p>`,
      real: `<p>老板电器的人工客服服务时间为 <strong>8:30-21:30</strong>（春节假期除外）。如果您在这个时间段外有任何问题，可以随时联系我，我会尽力为您解答！ 😊  </p>
    <p>如需帮助，也可以拨打官方客服热线：  </p>
    <ul>
    <li>全国统一客服电话：<a href="tel:95105855">95105855</a></li>
    <li>未开通地区：<a href="tel:057186281080">0571-86281080</a></li>
    </ul>
    <p>祝您生活愉快！</p>`
    };
    const html = marked.parse(test.input);
    document.body.innerHTML = html;
  </script>
</html>
